<template>
  <div>
  <el-container>
    <div style="display: flex ;margin-left: 10px;height: 10%;margin-top: 10px">
      <el-input v-model="input1" style="width: 240px" placeholder="请输入用户手机号"/>
      <el-input v-model="input2" style="width: 240px" placeholder="请输入用户名" />
      <el-button :disabled="input1.length===0&&input2.length===0" @click='getUser(userInfo.info.enterpriseId)'  type="primary">搜索</el-button>
      <el-badge :value='canNum' style="margin-left: 2vh"><el-button  @click='getCanUser(userInfo.info.enterpriseId)'  type="primary">待通过用户</el-button></el-badge>
      <el-button style="margin-left: 2vh" @click='clearInputs()'  type="info">全部用户</el-button>
    </div>
    <br>

      <el-table :data="user" style="margin-left: -96.5vh;margin-top:10vh;width: 149vh;border-radius: 10px" >
        <el-table-column prop="id" label="用户编号" width="180"></el-table-column>
        <el-table-column prop="username" label="用户名" width="100"></el-table-column>
        <el-table-column prop="realName" label="真实名" width="80"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="110"></el-table-column>
        <el-table-column prop="" label="职务" width="110"><template  #default="{row}"><el-input type="textarea" v-model='row.job'/></template></el-table-column>
        <el-table-column prop="email" label="邮箱" width="150"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120"></el-table-column>
        <el-table-column label="用户状态" width="220" >
          <template  #default="{row}">
          <div v-if="user[0].id!==''">
            <div v-if="row.userStatus==='FREEZE'">封禁</div>
            <div v-if="row.userStatus==='CANDIDATE'">候选</div>
            <div v-if="row.userStatus==='NORMAL'">正常</div>
          </div>

          <el-select v-model="row.type" placeholder="选择状态" style="width: 150px;float: right;margin-top: -23px" >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
            />
          </el-select>   </template>
        </el-table-column>
        <el-table-column label="操作" width="100" >
          <template  #default="{row}">
          <el-button type="primary" :disabled="user[0].id===''" @click="tokeUser(row)">提交</el-button>
            </template>
        </el-table-column>

      </el-table>

  </el-container>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="totals"
        v-if="isCanUser===false"
        v-model:page-size="pageSize"
        v-model:current-page= "pageCount"
        @change="getUser(userInfo.info.enterpriseId)"
        class="mt-4"
        style="display: flex; justify-content: center;margin-top: 2vh"
    />
    <el-pagination
        background
        layout="prev, pager, next"
        :total="totals2"
        v-if="isCanUser===true"
        v-model:page-size="pageSize"
        v-model:current-page= "pageCount2"
        @change="getCanUser(userInfo.info.enterpriseId)"
        class="mt-4"
        style="display: flex; justify-content: center;margin-top: 2vh"
    />
  </div>
</template>

<script setup>

import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {now} from "@vueuse/core";
import {getCanNums, updateInfoByIdService, userGetCanUser, userGetUser, userUpdateName} from "@/api/user.js";
import useUserInfoStore from "@/stores/userInfo.js";
const type = ref()
const userInfo = useUserInfoStore()

const options = [
  {
    value: "normal",
    label: '正常/激活',
  },
  {
    value: "freeze",
    label: '封禁',
  },
]


const user = ref([])
const isCanUser = ref(false)

const input1=ref('')
const input2=ref('')
const totals=ref(1)
const totals2=ref(1)
const pageSize=ref(3)
const pageCount=ref(Math.ceil(totals.value/pageSize.value))
const pageCount2=ref(Math.ceil(totals2.value/pageSize.value))
const clearInputs=()=>{
  input1.value=''
  input2.value=''
  pageCount.value=1
  getUser(userInfo.info.enterpriseId)
}
//编辑用户状态
const tokeUser=(row)=>{
  ElMessageBox.confirm(
      '请问您确定要提交吗',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        if (row.type===undefined){
          row.type='normal'
        }
        await updateInfoByIdService(row.id,row.job,row.type)
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
        await getUser(userInfo.info.enterpriseId)
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消操作',
        })
      })

}
const getCanUser = async (id) => {
  let res
  try {
    res = await userGetCanUser(id,pageCount2.value,2)
    isCanUser.value=true
    ElMessage.success( '查找成功')
    user.value = res.list
    totals2.value = res.total
  }catch(error) {
    ElMessage.error(error.response?.data?.msg || '查找失败')
  }
}
const getUser = async (id) => {
  let res
  try {
    res  = await userGetUser(id,input1.value,input2.value,pageCount.value,pageSize.value)
    isCanUser.value=false
    user.value = res.list
    totals.value = res.total
  }catch(error) {
    ElMessage.error(error.response?.data?.msg || '查找失败')
  }
}
const canNum = ref(0)
const getCanNum = async (id) => {
    canNum.value = await getCanNums(id)
}
getCanNum(userInfo.info.enterpriseId)
getUser(userInfo.info.enterpriseId)

</script>

<style scoped lang="scss">

</style>